<template>
	<view class="informantion_mask" @tap.stop="closeModel">
		<view class="informantion_content" @tap.stop.prevent>
			<view class="itemSty">
				<view class="cent-wrap" style="margin-bottom: 20rpx;">
					<view class="yuan">

					</view>

					<view class="cent-title">
						猜你想买
					</view>

					<view class="yuan">

					</view>
				</view>
				<view class="wrap-sty cent-wrap">
					<image :src="form.Photos" mode="widthFix" class="img-sty"></image>
					<view class="mark" v-if="status==1">

					</view>
					<image src="@/static/home/Removed.png" mode="widthFix" class="Removed" v-if="status==1"></image>
				</view>

				<view :class="['pop-title',status==1?'offshelf':'']">
					{{form.storeGoods.goodsName || ''}}
				</view>

				<view class="pop-price">
					<cn-money :money="form.goodsPackage.price/100 || 0"
						:style="status==1?'color:#8B8B8B':''"></cn-money>
				</view>

				<!-- 		<view class="pop-stroe">
					<image src="@/static/home/cart1.png" mode="widthFix" class="btn-img"></image>
					{{this.form.store.name || '王记小店'}}
				</view> -->


				<view class="pop-btn" @click="closeModel" v-if="status==1">
					逛逛其他商品
				</view>

				<view class="pop-btn" @click="onsubmit" v-else>
					立即购买
				</view>

				<view class="close-sty" @tap="closeModel">
					<image src="@/static/home/del-f.png" mode="widthFix" class="img-sty"></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";

	import {
		getCodeItem
	} from "@/api/apis.js";
	export default {
		data() {
			return {
				form: {
					storeGoods: {},
					goodsPackage: {
						price: 0,
					},
					store: {},
					Photos: ""

				},

				status: 0,
			}
		},
		computed: {
			...mapState("userInfo", ["Info", 'storeId', 'storeForm']),
			...mapState("copyText", ["word"]),
		},

		onShow() {
			console.log(this.word);
			if (this.word) {
				this.getGTime()
			}
		},

		methods: {
			//点击mask消失，由于是页面实际相当于返回
			closeModel() {
				uni.navigateBack({
					delta: 1
				})

				uni.setClipboardData({
					data: '',
					showToast: false,
					success: function() {
						console.log('剪贴板内容已清空');
					},
					fail: function(err) {
						console.error('清空剪贴板内容失败:', err);
					}
				});
			},

			onsubmit() {
				uni.redirectTo({
					url: `/pages/goodsdetail/goodsdetail?pkid=${this.form.storeGoods.id}`
				})
			},

			// 获取商品信息
			getGTime() {
				getCodeItem(this.word).then(res => {
					this.$nextTick(() => {
						this.form = res.result
						this.status = res.result.goodsPackage.onShelf
						let goodsPhotos = res.result.storeGoods.goodsPhotos
						const array = JSON.parse(goodsPhotos);
						if (Array.isArray(array)) {
							// 检查数组是否为空  
							if (array.length > 0) {
								// this.$nextTick(() => {
								this.form.Photos = array[0]
								// })
							} else {
								this.form.Photos = ""
							}
						} else {
							this.form.Photos = ""
						}
					})

				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
	}

	.informantion_mask {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.informantion_content {
		position: relative;
		width: 600rpx;
		// height: 832rpx;
		// overflow: hidden;
		border-radius: 10rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}



	.itemSty {
		position: relative;
		padding: 36rpx 28rpx;
		box-sizing: border-box;
		margin: 0 auto;
		width: 540rpx;
		// height: 892rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		justify-content: center;

		.wrap-sty {
			margin: 0 auto;
			width: 100%;
			height: 484rpx;
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;

			.img-sty {
				width: 100%;
				height: 100%;
			}

			.mark {
				position: absolute;
				top: 0%;
				left: 0%;
				height: 100%;
				width: 100%;
				background-color: rgba(255, 255, 255, 0.5);
			}

			.Removed {
				position: absolute;
				width: 250rpx;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
			}
		}


		.cent-wrap {
			display: flex;
			justify-content: center;
			align-items: center;

			.cent-title {
				margin: 0 16rpx;
			}

			.yuan {
				width: 12rpx;
				height: 12rpx;
				background: $uni-color-theme;
				border-radius: 50%;
			}
		}

		.pop-title {
			margin-top: 16rpx;
		}

		.pop-price {
			margin-top: 8rpx;
		}

		.pop-stroe {
			margin-top: 24rpx;

			.btn-img {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}


		.pop-btn {
			margin-top: 32rpx;
			width: 484rpx;
			height: 72rpx;
			background: $uni-color-theme;
			border-radius: 36rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #FFFFFF;


		}

		// 删除
		.close-sty {
			position: absolute;
			bottom: calc(-36rpx - 58rpx);
			left: calc(50% - 58rpx);
			padding: 10rpx;

			.img-sty {
				width: 58rpx;
				height: 58rpx;
				border-radius: 0px 0px 0px 0px;
			}
		}
	}

	// 遮罩层
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;

		.mask-img {
			position: relative;
			background-color: rgba(225, 225, 225, 0.6);

			.Removed {
				position: absolute;
				top: 142rpx;
				left: calc(50% - 100rpx);
				width: 200rpx;
				height: 200rpx;
			}
		}

		.mask-color {
			color: #8B8B8B;
		}
	}

	.mask-Removed {
		position: absolute;
		z-index: 2;
		left: calc(50% - 100rpx);
		top: 242rpx;
	}

	.mask-btn {
		position: absolute;
		bottom: 36rpx;
		left: calc(50% - 242rpx);
		z-index: 2;
		margin-top: 42rpx;
		width: 484rpx;
		height: 72rpx;
		background: $uni-color-theme;
		border-radius: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		z-index: 2;
		color: #FFFFFF;
	}

	.offshelf {
		color: #8B8B8B;
	}
</style>